<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { getTitle } from "../../../api/titleApi";
import { getMaterialData,deleteMaterialData,tabPage } from "../../../api/Material";
import { Upload, Plus, UploadFilled } from '@element-plus/icons-vue'
import upData from "./upData/upData.vue";
import { istoken } from "../../../api/api";
import addData from "./upData/addData.vue";
const centerDialogVisible = ref(false)
const name = ref()
const thisSelectData = ref()
const selectData = ref()
const MaterialData = ref()
const size = ref()
const types = ref(1)
const data = ref()
const page = ref(0)
const item = ref(0)
const _id = ref('')
const upTitleDialogVisible = ref(false)
const FileData = ref()
// 初始化数据
onMounted(async () => {
    is()
    const resSelect = await getTitle()
    const res = await getMaterialData({ page: page.value })
    selectData.value = resSelect.data.data
    data.value = res.data.data
    item.value = res.data.msg
})
//判断登录
const is = async () => {
    const res = await istoken()
    if (res.data.code !== '200') {
        // 从localStorage中删除名为'token'的项
        localStorage.removeItem('token');
        localStorage.removeItem('mail');
    }
}
// 删除素材
const handleDelete = async(row: {_id:string}) => {
    _id.value = row._id
    const res = await deleteMaterialData({_id:row._id,page:page.value})
    data.value = res.data.data
    item.value = res.data.msg
}
//更新数据
const newData = (e:{data:{},msg:number}) => {
    data.value = e.data
    item.value = e.msg
}
//弹窗
const inFO = (e: boolean) => {
    centerDialogVisible.value = e;
}
//获取图片素材
const change = async (e: any) => {
    FileData.value = e.raw

}
//获取文件素材
const changeData = (e: any) => {
    MaterialData.value = e.raw

}
//修改弹窗
const titleInFO = (e:boolean) => {
    upTitleDialogVisible.value = e
}
//切换页面
const getPage = async(e:number) => {
    page.value = e
    const res = await tabPage({page:page.value})
    data.value = res.data.data
}
//修改数据
const sendUpData = (e:string) => {
    upTitleDialogVisible.value = true
    _id.value = e
} 
const newUpData = async(e:[]) => {
    data.value = e
}
</script>

<template>
    <!-- 修改按钮 @update:newtitleData="newtitleData" -->
    <upData title="修改类型" :_id  :page :types :upTitleDialogVisible @update:upTitleDialogVisible="titleInFO" @update:newtitleData="newUpData">
        <el-form label-width="auto">
            <el-form-item label="花费积分：">
                <el-input-number v-model="types" :min="0" :max="10"/>
            </el-form-item>
        </el-form>
    </upData>
    <!-- 添加按钮 -->
    <addData title="素材大全" :MaterialData :page :size :name :thisSelectData :types :FileData :centerDialogVisible
        @update:centerDialogVisible="inFO"
        @update:newData="newData"
        >
        <el-form label-width="auto">
            <el-form-item label="素材名称：">
                <el-input v-model="name" placeholder="请输入素材名称" />
            </el-form-item>
            <el-form-item label="素材分类：">
                <el-select v-model="thisSelectData" placeholder="请选择素材分类">
                    <el-option v-for="i in selectData" :key="i._id" :label="i.title" :value="i.title" />
                </el-select>
            </el-form-item>
            <el-form-item label="素材大小：">
                <el-input v-model="size" placeholder="请输入素材大小" />
            </el-form-item>
            <el-form-item label="花费积分：">
                <el-input-number v-model="types" :min="0" :max="10"/>
            </el-form-item>
            <!-- 上传图片 -->
            <el-form-item label="图片文件：">
                <el-upload action="#" :limit="1" list-type="picture-card" :on-change="change" :auto-upload="false">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <!-- 上传文件 -->
            <el-upload class="upload-demo" multiple drag :auto-upload="false" :on-change="changeData">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    Drop file here or <em>click to upload</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        请上传素材文件
                    </div>
                </template>
            </el-upload>
        </el-form>
    </addData>
    <!-- ------------- -->
    <div class="data">
        <div class="input">
            <el-button type="primary" :icon="Upload"
                @click="centerDialogVisible = !centerDialogVisible">添加素材</el-button>
        </div>
        <el-table :data="data" border style="width: 100%">
            <el-table-column label="_id" prop="_id"/>
            <el-table-column label="名字" prop="name"/>
            <el-table-column label="标题" prop="selectData"/>
            <el-table-column label="大小" prop="size"  width="100px"/>
            <el-table-column label="积分" prop="types" width="100px"/>
            <el-table-column align="left" label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                    <el-button type="info" @click="sendUpData(scope.row._id)">
                        修改类型
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination class="pageTop" @change="getPage" background layout="prev, pager, next" :total="item" />
        </div>
    </div>
</template>

<style scoped>
.data {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 6% 90% 5%;
}

.page {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    width: 100%;
}
</style>